<template>
    <div>
        <el-button size="small" type="primary" @click="cliAddTea" class="mb5"
        >
            新增茶室
        </el-button>
        <el-table :data="tempList" border class="wPer100">
          <el-table-column prop="id" label="茶室id" width="65">
          </el-table-column>
          <el-table-column prop="name" label="茶室名" width="100">
          </el-table-column>
          <el-table-column prop="phone" label="登录账户" width="115">
          </el-table-column>
          <el-table-column prop="tel" label="客服电话" width="115">
          </el-table-column>
          <el-table-column prop="card_discount" label="会员卡折扣" width="95">
          </el-table-column>
          <el-table-column prop="city" label="城市" width="65">
          </el-table-column>
          <el-table-column prop="lon" label="经度">
          </el-table-column>
          <el-table-column prop="lat" label="纬度" >
          </el-table-column>
          <el-table-column prop="opening_date" label="星期/开放" width="100">
          </el-table-column>
          <!-- <el-table-column prop="vip_gain" label="VIP限制" width="75">
          </el-table-column> -->
          <!-- <el-table-column prop="" label="VIP折扣" width="75">
          </el-table-column> -->
          <el-table-column prop="introduce" label="茶室介绍">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <el-table-column prop="date" label="创建时间" width="160">
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" class="mb5"
                @click="cliReviseBtn(scope.row)"
              >
                修改
              </el-button>
              <el-button size="mini" 
                  :type="scope.row.is_del == 1 ? 'danger' :
                    scope.row.is_del == 2 ? 'success' : 'info'"
                  @click="cliDelBtn(scope.row.id, scope.row.is_del)"
              >
                {{ 
                  scope.row.is_del == 1 ? '删除' :
                  scope.row.is_del == 2 ? '恢复' : scope.row.is_del
                }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogFormVisible1" width="375px"
          :title="(dialogFormType == 1 ? '新增' : '修改') + '茶室'"
        >
            <div class="mb14 overYS maxH375">
                <el-form :model="distributorData1" status-icon
                    :rules="distributorRules1" ref="distributorData1" label-width="100px"
                >
                    <el-form-item label="茶室名：" prop="name">
                        <el-input v-model="distributorData1.name" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="登录手机号：" prop="phone">
                        <el-input v-model="distributorData1.phone" size="small"
                          :disabled="dialogFormType == 2"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码：" prop="password">
                        <el-input v-model="distributorData1.password" size="small"
                          :disabled="dialogFormType == 2"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码：" prop="repassword">
                        <el-input v-model="distributorData1.repassword" size="small"
                          :disabled="dialogFormType == 2"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="打开地图：">
                      <el-button type="primary" plain size="mini"
                            @click="openCartography(1)"
                        >
                            打开地图选择经纬度
                        </el-button>
                    </el-form-item>
                    <el-form-item label="经度：" prop="lon">
                        <el-input v-model="distributorData1.lon" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="纬度：" prop="lat">
                        <el-input v-model="distributorData1.lat" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="城市：" prop="city">
                        <el-input v-model="distributorData1.city" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="地址：" prop="address">
                        <el-input v-model="distributorData1.address" size="small"
                        ></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="VIP限制：" prop="vip_gain">
                        <el-input v-model="distributorData1.vip_gain" size="small"
                            type="number" :disabled="dialogFormType == 2"
                        ></el-input>
                    </el-form-item> -->
                    <!-- <el-form-item label="VIP折扣：" prop="vip_discount">
                        <el-input v-model="distributorData1.vip_discount" size="small"
                            type="number" :disabled="dialogFormType == 2"
                        ></el-input>
                    </el-form-item> -->
                    <el-form-item label="会员卡折扣：" prop="card_discount">
                        <el-input v-model="distributorData1.card_discount" size="small"
                            type="digit" :max="1" :min="0"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="茶室电话：" prop="tel">
                        <el-input v-model="distributorData1.tel" size="small"
                            type="idcard"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="茶室介绍：" prop="introduce">
                        <el-input v-model="distributorData1.introduce" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="appid：">
                        <el-input v-model="distributorData1.appid" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="appsecret：">
                        <el-input v-model="distributorData1.appsecret" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="mch_id：">
                        <el-input v-model="distributorData1.mch_id" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="mchsecret：">
                        <el-input v-model="distributorData1.mchsecret" size="small"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="subDistributor1()"
                          size="small" class="mr5"
                          :type="dialogFormType == 1 ? 'primary' : 'warning'"
                        >
                          {{ dialogFormType == 1 ? '提交' : '修改' }}
                        </el-button>
                        <el-button @click="resetDistributor('distributorData1')" size="small">
                          重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title="选择坐标" :visible.sync="dialogFormVisible2" width="90%"
          id="dialogFormVisible2"
        >
            <div id="container" class="wPer100 h60v"
            ></div>
        </el-dialog>
    </div>
</template>
<script>
import { addTearoom, getHomeTeaList,
  isHomeDelTea, isSaveTeaInfo } from '@s/api'
import { Loading } from 'element-ui';
export default {
    data() {
        let phoneCheck = (rule, value, callback) => {
          if (value === '' && this.dialogFormType == 1) {
            callback(new Error('请输入手机号'));
          } else {
            callback();
          }
        };
        let passwordCheck = (rule, value, callback) => {
          if (value === '' && this.dialogFormType == 1) {
            callback(new Error('请输入登录密码'));
          } else {
            callback();
          }
        };
        let repasswordCheck = (rule, value, callback) => {
          if (value === '' && this.dialogFormType == 1) {
            callback(new Error('请输入确认密码'));
          } else {
            callback();
          }
        };
        let nameCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入茶室名'));
          } else {
            callback();
          }
        };
        let lonCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入经度'));
          } else {
            callback();
          }
        };
        let latCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入纬度'));
          } else {
            callback();
          }
        };
        let cityCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入城市'));
          } else {
            callback();
          }
        };
        let addressCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入地址'));
          } else {
            callback();
          }
        };
        // let vip_gainCheck = (rule, value, callback) => {
        //   if (value === '' && this.dialogFormType == 1) {
        //     callback(new Error('请输入VIP限制'));
        //   } else {
        //     callback();
        //   }
        // };
        // let vip_discountCheck = (rule, value, callback) => {
        //   if (value === '' && this.dialogFormType == 1) {
        //     callback(new Error('请输入VIP折扣'));
        //   } else {
        //     callback();
        //   }
        // };
        let card_discountCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入会员卡折扣'));
          } else {
            if(value > 1 || value < 0) {
              callback(new Error('范围大于0小于等于1，保留两位小数'));
            }else {
              this.distributorData1.card_discount = Number(this.distributorData1.card_discount).toFixed(2);
              console.log(this.distributorData1.card_discount)
              callback();
            }
          }
        };
        let introduceCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入茶室介绍'));
          } else {
            callback();
          }
        };
        let telCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入茶室电话'));
          } else {
            callback();
          }
        };
        return {
            dialogFormVisible1: false,
            distributorData1: {
                phone: '', password: '', repassword: '', name: '',
                lon: '', lat: '',
                city: '', address: '', vip_gain: 0, //vip_discount: '',
                card_discount: '',
                introduce: '', tel: '',
                appid: '', appsecret: '', mch_id: '', mchsecret: ''
            },
            distributorRules1: {
                phone: [{ validator: phoneCheck, trigger: 'blur' }],
                password: [{ validator: passwordCheck, trigger: 'blur' }],
                repassword: [{ validator: repasswordCheck, trigger: 'blur' }],
                name: [{ validator: nameCheck, trigger: 'blur' }],
                lon: [{ validator: lonCheck, trigger: 'blur' }],
                lat: [{ validator: latCheck, trigger: 'blur' }],
                city: [{ validator: cityCheck, trigger: 'blur' }],
                address: [{ validator: addressCheck, trigger: 'blur' }],
                // vip_gain: [{ validator: vip_gainCheck, trigger: 'blur' }],
                // vip_discount: [{ validator: vip_discountCheck, trigger: 'blur' }],
                card_discount: [{ validator: card_discountCheck, trigger: 'blur' }],
                introduce: [{ validator: introduceCheck, trigger: 'blur' }],
                tel: [{ validator: telCheck, trigger: 'blur' }]
            },
            dialogFormType: 1,
            dialogFormTid: '',
            dialogFormRow: {},
            dialogFormVisible2: false,
            tempList: [],
        }
    },
    mounted() {
        this.getDataList1();
    },
    methods: {
        cliAddTea() {
          this.dialogFormVisible1 = true;
          this.distributorData1 = {
            name: '', phone: '', password: '', repassword: '', lon: '', lat: '',
            city: '', address: '', vip_gain: 0,//vip_discount: '',
            card_discount: '', tel: '', introduce: '',
            appid: '', appsecret: '', mch_id: '', mchsecret: ''
          }
          this.dialogFormType = 1;
        },
        openCartography(type) {
            this.dialogFormVisible2 = true;
            let loadingInstance = '';
            setTimeout(() => {
                loadingInstance = Loading.service({
                text: '加载地图中...', background: 'rgba(0, 0, 0, 0.8)',
                spinner: 'el-icon-loading'
                });
            }, 100)
            setTimeout(() => {
                var map = new qq.maps.Map(document.getElementById("container"), {
                center: new qq.maps.LatLng(24.88946, 118.613),//原22.553147478403194, 114.049072265625
                zoom: 13
                });
                this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                loadingInstance.close();
                });
                qq.maps.event.addListener(map, 'click', (event) => {//添加监听事件  获取鼠标单击事件
                    var marker=new qq.maps.Marker({
                        position:event.latLng,
                        map:map
                    });
                    console.log(marker)
                    qq.maps.event.addListener(map, 'click', function(event) {
                        marker.setMap(null);
                    });
                    this.dialogFormVisible2 = false;
                    if(type == 1) {
                        this.distributorData1.lon = event.latLng.getLng();
                        this.distributorData1.lat = event.latLng.getLat();
                    }else if(type == 2) {
                        
                    }
                });
            }, 1500)
        },
        subDistributor1() {
            this.$refs['distributorData1'].validate(valid => {
                if (valid) {
                  if(this.dialogFormType == 1) {
                    addTearoom({
                        token: this.$store.getters.token,
                        phone: this.distributorData1.phone,
                        password: this.distributorData1.password,
                        repassword: this.distributorData1.repassword,
                        name: this.distributorData1.name,
                        lon: this.distributorData1.lon,
                        lat: this.distributorData1.lat,
                        city: this.distributorData1.city,
                        address: this.distributorData1.address,
                        vip_gain: this.distributorData1.vip_gain,
                        // vip_discount: this.distributorData1.vip_discount,
                        card_discount: this.distributorData1.card_discount,
                        introduce: this.distributorData1.introduce,
                        tel: this.distributorData1.tel,
                        appid: this.distributorData1.appid,
                        appsecret: this.distributorData1.appsecret,
                        mch_id: this.distributorData1.mch_id,
                        mchsecret: this.distributorData1.mchsecret
                    }).then(res => {
                        this.getDataList1();
                        this.dialogFormVisible1 = false;
                        this.$message({ type: "success", message: '新增成功' });
                    })
                  }else if(this.dialogFormType == 2) {
          console.log(this.distributorData1.name)

                    let newObj = {};
                    if(this.dialogFormRow.name != this.distributorData1.name) newObj.name = this.distributorData1.name;
                    if(this.dialogFormRow.lon != this.distributorData1.lon) newObj.lon = this.distributorData1.lon;
                    if(this.dialogFormRow.lat != this.distributorData1.lat) newObj.lat = this.distributorData1.lat;
                    if(this.dialogFormRow.city != this.distributorData1.city) newObj.city = this.distributorData1.city;
                    if(this.dialogFormRow.address != this.distributorData1.address) newObj.address = this.distributorData1.address;
                    if(this.dialogFormRow.card_discount != this.distributorData1.card_discount) newObj.card_discount = this.distributorData1.card_discount;
                    if(this.dialogFormRow.tel != this.distributorData1.tel) newObj.tel = this.distributorData1.tel;
                    if(this.dialogFormRow.introduce != this.distributorData1.introduce) newObj.introduce = this.distributorData1.introduce;
                    if(this.dialogFormRow.appid != this.distributorData1.appid) newObj.appid = this.distributorData1.appid;
                    if(this.dialogFormRow.appsecret != this.distributorData1.appsecret) newObj.appsecret = this.distributorData1.appsecret;
                    if(this.dialogFormRow.mch_id != this.distributorData1.mch_id) newObj.mch_id = this.distributorData1.mch_id;
                    if(this.dialogFormRow.mchsecret != this.distributorData1.mchsecret) newObj.mchsecret = this.distributorData1.mchsecret;
                    if(Object.keys(newObj).length == 0) {
                      return this.$message({
                        message: '您没有改动茶室信息',
                        type: 'warning'
                      });
                    }
                    let postData = new FormData(); 
                    postData.append('token', this.$store.getters.token);
                    postData.append('tid', this.dialogFormTid);
                    if(newObj.name) postData.append('name', newObj.name);
                    if(newObj.lon) postData.append('lon', newObj.lon);
                    if(newObj.lat) postData.append('lat', newObj.lat);
                    if(newObj.city) postData.append('city', newObj.city);
                    if(newObj.address) postData.append('address', newObj.address);
                    if(newObj.card_discount) postData.append('card_discount', newObj.card_discount);
                    if(newObj.tel) postData.append('tel', newObj.tel);
                    if(newObj.introduce) postData.append('introduce', newObj.introduce);
                    if(newObj.appid) postData.append('appid', newObj.appid);
                    if(newObj.appsecret) postData.append('appSecret', newObj.appsecret);
                    if(newObj.mch_id) postData.append('mch_id', newObj.mch_id);
                    if(newObj.mchsecret) postData.append('mchSecret', newObj.mchsecret);
                    isSaveTeaInfo(postData).then(res => {
                        this.getDataList1();
                        this.dialogFormVisible1 = false;
                        this.$message({ type: "success", message: '修改成功' });
                      })
                  }
                }
            })
        },
        resetDistributor(formName) {
            this.$refs[formName].resetFields();
        },
        getDataList1() {
            getHomeTeaList({
              token: this.$store.getters.token
            }).then(res => {
              this.tempList = res.data;
            })
        },
        cliReviseBtn(scopeRow) {
          this.dialogFormRow = scopeRow;
          this.dialogFormTid = scopeRow.id;
          this.distributorData1 = {//vip_gain、vip_discount不可更改
            name: scopeRow.name, phone: scopeRow.phone, password: '', repassword: '',
            lon: scopeRow.lon, lat: scopeRow.lat, city: scopeRow.city,
            address: scopeRow.address, vip_gain: 0,//vip_discount: '',
            card_discount: scopeRow.card_discount, tel: scopeRow.tel,
            introduce: scopeRow.introduce,
            appid: scopeRow.appid, appsecret: scopeRow.appsecret,
            mch_id: scopeRow.mch_id, mchsecret: scopeRow.mchsecret
          };
          this.dialogFormType = 2;
          this.dialogFormVisible1 = true;
        },
        cliDelBtn(tid, is_del) {
          this.$confirm(`确定${is_del == 1 ? '删除' : '恢复'}茶室？`,
              '提示', {
              confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
          }).then(() => {
            isHomeDelTea({
              token: this.$store.getters.token, tid,
              is_del: (is_del == 1 ? 2 : 1)
            }).then(res => {
              this.$message({ type: "success", message: `${is_del == 1 ? '删除' : '恢复'}成功` });
              this.getDataList1();
            })
          }).catch(() => { });
        }
    }
}
</script>
<style>
.el-button+.el-button {margin-left: 0;}
/* 去掉input[type="number"]框右边的上下键 begin */
/* input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
} */
/* 去掉input[type="number"]框右边的上下键 end */
</style>